import React,{ useState,useEffect } from 'react'
import { Row,Col,Icon,Menu } from 'antd'
import Axios from 'axios'
import { servicePath } from '../config/apiUrl'
import Link from "next/link"
import Router from 'next/router'

import "../public/style/components/header.less"

const MenuItem = Menu.Item


const Header = ()=>{
    const [typeArray,setTypeArray] = useState([])
    useEffect(()=>{
        const getTypeInfo = async function(){
            let res = await Axios({
                method:'get',
                url:servicePath.getTypeInfo,
                header:{ 'Access-Control-Allow-Origin':'*' },
                withCredentials:true,
            }).then((res)=>{
                console.log(res);
                return res.data
            })
            setTypeArray(res.data)
        }   
        getTypeInfo()

    },[])
    const handClick = (e)=>{
        console.log(e)
        if(e.key === "0"){
            Router.push({pathname:"/index"})
        }else{
            Router.push({pathname:"/list",query:{id:e.key}})
        }
    }
    return (
        <div className="header">
           <Row type="flex" justify="center" >
               <Col xs={22} sm={22} md={10} lg={10} xl={11}>
                    <Link href="/index">
                        <a>
                            <span className="header-logo">技术胖</span>
                            <span className="header-txt">一个彻头彻尾的胖子。</span>
                        </a>
                    </Link>
               </Col>
               <Col className="menu-div" xs={0} sm={0} md={13} lg={8} xl={7}>
                   <Menu mode="horizontal" onClick={handClick}>
                        {/* <MenuItem title="博客首页"><Icon type="home"/> 博客首页</MenuItem>
                        <MenuItem title="视频教程"><Icon type="video-camera" /> 视频教程</MenuItem>
                        <MenuItem title="逼逼叨"><Icon type="bg-colors" /> 逼逼叨</MenuItem> */}
                        {
                            typeArray.map((item,index)=>{
                                return (<MenuItem key={index} title={item.typeName}><Icon type={item.icon}/>{item.typeName}</MenuItem>)
                            })
                        }
                   </Menu>
               </Col>
           </Row>
        </div>
    )
}

export default Header
